
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>问卷调查</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <link href="http://nsr.9hive.cn/global/vendor/icheck/icheck.min.css" rel="stylesheet">
    <link href="http://nsr.9hive.cn/global/vendor/icheck/skins/flat/blue.css" rel="stylesheet">
    <link href="http://nsr.9hive.cn/hive/active/css/questionnaire.css" rel="stylesheet">

</head>
<body>
<div>
    <div class="flex-horziontal" style="padding-top: 40px">
        <h4>杨浦百联滨江店</h4><!--<img src="http://nsr.9hive.cn/hive/active/img/logo1.jpg" class="logo">-->
    </div>
    <div class="background-class" style=";padding: 0 20px 40px;color: #666">
        <!--background-image: url('./img/logo.jpg')-->
        <div style="margin-top: 40px">
            为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位顾客的宝贵意见，期待您的参与！现在我们就马上开始吧！
        </div>
        <div style="padding-top: 20px">
            <div><span style="color: red">*</span>1.您是选择堂食还是外带？
            </div>
            <div class="i-checks checkbox" id="checkBox6" style="padding-left: 10px;">
                <div style="margin-top: 5px">
                    <input type="radio" value="0" id="flavour7" name="take"/>
                    <label for="flavour7" class="checkspace"/>堂食</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="radio" value="1" id="sweet7" name="take"/>
                    <label for="sweet7" class="checkspace">外带</label>
                </div>
            </div>

        </div>
        <div style="padding-top: 20px">
            <div><span style="color: red">*</span>2.您购买的饮料名称是！(如有点心请写上点心)</div>
            <div style="padding:0 10px">
                <textarea id="buyProduct" placeholder=""></textarea>
            </div>
        </div>
        <div style="padding-top: 20px">

            <div><span style="color: red">*</span>3.请您写下购买的饮品不足的地方：
            </div>
            <div class="i-checks checkbox" id="checkBox" style="padding-left: 10px;">
                <div style="margin-top: 5px">
                    <input type="checkbox" id="flavour" name="drink"/>
                    <label for="flavour" class="checkspace"/>咖啡味道淡</label>
                </div>
                <div style="margin-top: 5px">

                    <input type="checkbox" id="sweet" name="drink"/>
                    <label for="sweet" class="checkspace">饮料太甜</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="checkbox" id="milkmore" name="drink"/>
                    <label for="milkmore" class="checkspace"/>奶泡较多</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="checkbox" id="appearance" name="drink"/>
                    <label for="appearance" class="checkspace">饮料外观</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="checkbox" id="S_5" name="drink"/>
                    <label for="S_5" class="checkspace">以上都不是</label>
                </div>
            </div>
            <div style="margin-top: 10px">
                您希望我们改善的是：
            </div>
            <div style="padding:0 10px">
                <textarea id="drinkImprove" placeholder=""></textarea></div>
        </div>
        <div style="padding-top: 20px">
            <div>4.请您写下对于购买的食品不足的地方：
            </div>
            <div class="i-checks checkbox" id="checkBox2" style="padding-left: 10px;">
                <div style="margin-top: 5px">
                    <input type="checkbox" id="flavour2" name="flavour"/>
                    <label for="flavour2" class="checkspace"/>口味不佳</label>
                </div>
                <div style="margin-top: 5px">

                    <input type="checkbox" id="sweet2" name="flavour"/>
                    <label for="sweet2" class="checkspace">太热</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="checkbox" id="milkmore2" name="flavour"/>
                    <label for="milkmore2" class="checkspace"/>太冷</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="checkbox" id="appearance2" name="flavour"/>
                    <label for="appearance2" class="checkspace">没有喜欢的品类</label>
                </div>

            </div>

        </div>

        <div style="padding-top: 20px">
            <div><span style="color: red">*</span>5.门市伙伴有无关注您的需求：
            </div>
            <div class="i-checks checkbox" id="checkBox3" style="padding-left: 10px;">
                <div style="margin-top: 5px">
                    <input type="checkbox" id="flavour3" name="necessary"/>
                    <label for="flavour3" class="checkspace"/>收银伙伴未及时沟通</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="checkbox" id="flavour6" name="necessary"/>
                    <label for="flavour6" class="checkspace"/>吧台伙伴未及时沟通</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="checkbox" id="sweet3" name="necessary"/>
                    <label for="sweet3" class="checkspace">门市伙伴未满足您的需求</label>
                </div>
                <div style="margin-top: 5px">

                    <input type="checkbox" id="f_4" name="necessary"/>
                    <label for="f_4" class="checkspace">以上都不是</label>
                </div>

            </div>

        </div>
        <div style="padding-top: 20px">
            <div>6.门市整体环境如何：
            </div>
            <div class="i-checks checkbox" id="checkBox4" style="padding-left: 10px;">
                <div style="margin-top: 5px">
                    <input type="checkbox" id="flavour4" name="environment"/>
                    <label for="flavour4" class="checkspace"/>环境太吵</label>
                </div>
                <div style="margin-top: 5px">

                    <input type="checkbox" id="sweet4" name="environment"/>
                    <label for="sweet4" class="checkspace">环境太脏</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="checkbox" id="milkmore4" name="environment"/>
                    <label for="milkmore4" class="checkspace"/>环境太乱</label>
                </div>

            </div>

        </div>
        <div style="padding-top: 20px">
            <div><span style="color: red">*</span>7.您还会选择再来门市消费吗？
            </div>
            <div class="i-checks checkbox" id="checkBox5" style="padding-left: 10px;">
                <div style="margin-top: 5px">
                    <input type="checkbox" id="flavour5" name="date"/>
                    <label for="flavour5" class="checkspace"/>3天内</label>
                </div>
                <div style="margin-top: 5px">

                    <input type="checkbox" id="sweet5" name="date"/>
                    <label for="sweet5" class="checkspace">一周内</label>
                </div>
                <div style="margin-top: 5px">
                    <input type="checkbox" id="milkmore5" name="date"/>
                    <label for="milkmore5" class="checkspace"/>不会再来</label>
                </div>

            </div>

        </div>

        <div style="padding-top: 20px">
            <div>8.您觉得本次的服务怎么样？下方您可以描述本次的消费体验。
            </div>
            <div style="padding:0 10px">
                <textarea id="service" placeholder="您的消费体验" style="font-size: 16px"></textarea></div>
        </div>
        <!--<div style="padding-top: 20px;display: flex;align-items: center">-->
        <!--<label style="width: 80px">联系方式：</label>-->
        <!--<input class="light-input" placeholder="邮箱/手机号码(选填，方便我们联系您)"/>-->
        <!--</div>-->

        <div style="padding-top: 20px">
            感谢您抽出宝贵的时间完成此份问卷调查，我们会根据您的意见尽快改善门市不足，为您带来更好的消费体验。
            门市不定期有咖啡教室活动，有任何问题以及想要咨询的顾客都可以联系我们的门店经理王彤18301822813
        </div>

        <div style="padding-top: 20px;text-align: center">
            <button class="hive-btn" style="width: 60vw" id="confirm">提交</button>
        </div>
    </div>

</div>

<script src="http://nsr.9hive.cn/global/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="http://nsr.9hive.cn/global/vendor/ydui/js/ydui.js"></script>
<script src="http://nsr.9hive.cn/global/vendor/icheck/icheck.min.js"></script>

<script src="https://static.9hive.cn/global/vendor/layer/layer.js"></script>
<script>
    (function () {
        $('.i-checks').iCheck({
            radioBoxClass: 'iradioBox_flat-blue',
            radioClass: 'iradio_flat-blue',
            checkboxClass: 'icheckbox_flat-blue',
        });
        $('#confirm').on('click', function () {
            var buyPro = $('#buyProduct').val();
            var drinkImprove = $('#drinkImprove').val();
            var service = $('#service').val();
            //第二题
            var problem1List = $("#checkBox input[name='drink']");
            var problem1 = $("#checkBox input[name='drink']:checked");

            var second = '';
            $(problem1).each(function () {
                second += problem1List.index($(this)) + ","

            });
            console.log("二 ：" + second)

            //第三题
            var problem1List2 = $("#checkBox2 input[name='flavour']");
            var problem12 = $("#checkBox2 input[name='flavour']:checked");
            var third = '';
            $(problem12).each(function () {
                third += problem1List2.index($(this)) + ","

            });
            console.log("三 ：" + third);

            //第四题
            var problem1List3 = $("#checkBox3 input[name='necessary']");
            var problem13 = $("#checkBox3 input[name='necessary']:checked");
            var foruth = '';
            $(problem13).each(function () {
                foruth += problem1List3.index($(this)) + ","

            });
            console.log("四 ：" + foruth)

            //第五题
            var problem1List4 = $("#checkBox4 input[name='environment']");
            var problem14 = $("#checkBox4 input[name='environment']:checked");
            var fifth = '';
            $(problem14).each(function () {
                fifth += problem1List4.index($(this)) + ","

            });
            console.log("五：" + fifth);

            //第六题
            var problem1List5 = $("#checkBox5 input[name='date']");
            var problem15 = $("#checkBox5 input[name='date']:checked");
            var sixth = '';
            $(problem15).each(function () {
                sixth += problem1List5.index($(this)) + ","

            });
            console.log("六：" + sixth);

            //第七题
            var seventh=$('input[name="take"]:checked').val();
            console.log("七：" + seventh)
            if(!seventh){
                layer.msg("亲,第一题为必填项哦!");
                return;
            }
            if(buyPro.length<=0){
                layer.msg("亲,第二题为必填项哦!");
                return;
            }
            if(second.length<=0){
                layer.msg("亲,第三题为必填项哦!");
                return;
            }
            if(foruth.length<=0){
                layer.msg("亲,第五题为必填项哦!");
                return;
            }
            if(sixth.length<=0){
                layer.msg("亲,第七题为必填项哦!");
                return;
            }

            $.ajax({
                url: '/active/questionnaire/save',
                data: {
                    "question.first": buyPro,
                    "question.second": second,
                    "question.secondContent": drinkImprove,
                    "question.third": third,
                    "question.fourth": foruth,
                    "question.fifth": fifth,
                    "question.sixth": sixth,
                    "question.seventh": seventh,
                    "question.seventhContent": service,
                    "question.hasRead": 0,

                },
                success: function(data){
                    if (data.state == 'ok'){
                        layer.msg("提交成功,感谢您的反馈!");
                        setTimeout(function() {
                            //window.location.href="/active/questionnaire"
                            $("#confirm").hide();
                        },1000)
                    }else{
                        layer.msg("网络异常!");
                    }
                }

            })
        })
    })()
</script>
</body>
</html>